<template>
    <div>
        <h2>=========      v-model：实现数据双向绑定，用于input，textarea          ===========</h2>

        <h4>v-model实现双向绑定的原理</h4>
        <!-- input有个特有的动态监听事件，用来监听表单数据value的变化。v-on:input  button也有特有的监听事件 -->
        <!-- <input type="text" :value='message' v-on:input="changeinputvalue"> -->
        <input type="text" :value='message' @input="message = $event.target.value">
        {{message}}
  
        <h4>v-model可以直接实现view model 的双向绑定</h4>
        <!-- v-model可以直接实现view model 的双向绑定 -->
        <input type="text" v-model="message">
        {{message}}
  
      <h4>=========v-model结合input其他type类型的用法===========</h4>
        <h3>1,v-model结合单选框radio</h3>
        <div class="radio">
          <p>在input外层包裹labe，可以使得点击input框外的文字时，也获取到焦点。包括点击文字时也能实现单选框/复选框的勾选。label的for属性值和input的id值要保持一致</p>
          <p>原生html时，加上name属性后，若name值相同，就能实现单选。当都加上v-model属性时，不使用name属性，也能实现单选</p>
          <label for="male">
            男
            <input type="radio" id="male" value="男" v-model="sex">
          </label>
          <label for="female">
            女
            <input type="radio" id="female" value="女" v-model="sex">
          </label>
          <p>您选择的性别是：{{sex}}</p>
        </div>
  
        <h3>2，v-model结合复选checkbox</h3>
        <div>
          <p>2.1checkbox只有一个的情况</p>
          <label for="agree">
            同意协议
            <input type="checkbox" id="agree" v-model="isAgree">
          </label>
          <p>您选择的是：{{isAgree}}</p>
          <!-- 用户同意协议才可以进行下一步 。默认不同意协议，为false。此时disabled应该为true。所以取反 -->
          <button :disabled="!isAgree">下一步</button>
  
          <p>2.2checkbox有多个的情况</p>
          <!-- <label for="eat">
              <input type="checkbox" id="eat" value="吃饭" v-model="hobbies">吃饭
          </label>
          <label for="sleep">
            <input type="checkbox" id="sleep" value="睡觉" v-model="hobbies">睡觉
          </label>
          <label for="hit">
              <input type="checkbox" id="hit" value="打豆豆" v-model="hobbies">打豆豆
          </label> -->
          <label :for="item" v-for="item in hobbies" :key="item">
            <input type="checkbox" :id="item" :value="item" v-model="hobbies">{{item}}
          </label>
          <p>您选择的爱好有：{{hobbies}} </p>
        </div>
  
        <h3>3，v-model结合select</h3>
        <select name="fruitlalala" v-model="fruits"><!-- 加multiple属性可以选择多个 -->
          <option value="榴莲">榴莲</option>
          <option value="草莓">草莓</option>
          <option value="菠萝">菠萝</option>
        </select>
        <p>您选择的水果是：{{fruits}} </p>
    </div>
</template>

<script>
export default {
  name: 'Vmodel',
  data() {
    return {
      message:'hahah',
      sex:'女',//默认选中女
      isAgree: false,//默认不同意协议
      hobbies:['吃饭','睡觉','打豆豆'],
      fruits:'草莓'
    }
  },
  methods:{
    // 表单数据实现双向绑定的原理。
    // 1,通过v-bind:value将model的值绑定到view。
    // 2，通过表单特有的监听事件v-on:input与event将view的值实时响应给model

    // changeinputvalue(event) {//当调用函数changeinputvalue不加括号不带参数，而函数本身需要传一个参数时，浏览器会默认传一个event参数。
    //     console.log(event.target.value);//获取到input框用户输入的值value
    //     // 把value值赋给message,这样就能实现将表单用户输入的值与message进行绑定。
    //     this.message = event.target.value;
    // }
  }
}
</script>
          